<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span style="height: 100px;background-color: red;display: block;">特定类型显示的元素</span>
    <script>
        // height 属性
            // 定义：
            //     height 用于设置元素的高度，即元素的垂直空间。
            // 应用范围：
            //     height 通常用于块级元素（如 div、p、section）或具有特定显示类型的元素。
            //    具有特定显示类型的元素”指的是 CSS 中由 display 属性控制的元素类型。
            //    display 属性定义了一个元素在文档布局中如何表现。根据 display 属性的不同值，
            //    元素的显示类型可以是块级、行内、行内块级、网格、弹性容器等。
            //     对于行内元素（如 span），height 仅在将其转化为块级元素或设置 display: block、
            //     display: inline-block 时才有效。
            // 影响：
            //     height 属性控制的是元素本身的高度，不会影响行内元素的高度或文本的垂直对齐方式。


        // line-height 属性
        //     定义：
        //         line-height 用于设置行高，即文本行的高度。它控制的是行内元素或块级元素中文本的垂直间距。
        //     应用范围：
        //         line-height 可以应用于任何元素，尤其是在设置文本的行间距时非常有用。line-height 的值可以是数值、
        //         百分比、长度（如 px、em），或者继承自父元素。

        //     影响：
        //         line-height 主要影响文本内容的行距。如果 line-height 值大于文本的高度，
        //         会在文本的上下增加间距，使文本更易于阅读。


        // 区别与应用
        //     控制对象不同：

        //     height 控制的是整个元素的高度，适用于设置块级元素的高度。
        //     line-height 控制的是文本行的高度，适用于调整行内文本的垂直间距。

        //     表现效果不同：

        //     使用 height 设置的高度会直接影响元素的整体高度，包括背景、边框和内容的高度。
        //     使用 line-height 设置的行高只影响文本的行间距，不会改变元素的总体高度，除非是一个单行文本的元素。

        //     典型场景：
        //     使用 height 可以控制一个 div 或 section 的高度，确保其占据一定的空间。
        //     使用 line-height 可以使文本看起来更为舒适，例如在段落中增加行间距，使文本更易于阅读。
    </script>
</body>
</html>